<template>
  <div class="rank-index">
    <div class="dm-carousel banner-inner" style="width:1200px;height:250px">
      <div class="slick-slider slick-initialized">
        <div class="slick-list" style="height: 253px;">
          <el-carousel height="253px">
            <el-carousel-item v-for="item in banners" :key="item">
              <el-image :src="item"></el-image>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
    </div>
    <div class="rank-index-navbar">
      <div class="home-navbar">
        <a v-for="(item,index) in menus" :key="index" :class="'home-navbar-item '+(item.path === path?'active':'')"
           @click="selTab(item)">{{ item.name }}</a>
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "HomepageView",
  data() {
    return {
      banners: [
        require('../assets/images/catdog8.jpg'),
        require('../assets/images/cat8.jpg'),
        require('../assets/images/dog6.png'),
          require('../assets/images/bluedogg.jpg'),
      ],
      path: '/homepage',
      menus: [
        {name: '狗狗', path: '/homepage'},
        {name: '猫猫', path: '/homepage/cat'},
        {name: '预约兽医', path: '/homepage/doctor'},
        {name: '宠物用品', path: '/cos'},
      ]
    };
  },
  /*避免路径重复，如果没有这个连点两次相同路径会报错*/
  mounted() {
    let that = this;
    setInterval(function () {
      that.path = that.$router.currentRoute.path;
    }, 1000)
  },
  methods: {
    selTab(item) {//标签切换
      this.path = item.path;
      this.$router.push({path: item.path});
    },
  }
};
</script>

<style scoped>
.rank-index {
  width: 1200px;
  margin: 0 auto;
}
.banner-inner {
  background-color: #fff;
  border-radius: 5px;
  margin: 12px auto 0;
  overflow: hidden;
}
.dm-carousel {
  position: relative;
}
.dm-carousel .slick-slider {
  width: 100%;
  height: 100%;
}
.dm-carousel .slick-slider {
  position: relative;
  display: block;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}
.dm-carousel .slick-slider .slick-list, .dm-carousel .slick-slider .slick-track {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
.dm-carousel .slick-list {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.rank-index .rank-index-navbar {
  height: 48px;
  margin: 12px auto;
  border-radius: 6px;
  -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
  background-color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.home-navbar {
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.home-navbar .home-navbar-item:not(:last-child) {
  padding-right: 48px;
}
.home-navbar .home-navbar-item {
  display: block;
  font-size: 16px;
  color: #252526;
  cursor: pointer;
  -webkit-transition: color .12s linear;
  transition: color .12s linear;
  line-height: 1.5;
}
a {
  text-decoration: none;
  color: #366cd9;
}
.home-navbar .home-navbar-item:hover {
  color: #fa4b8b;
}

.home-navbar .home-navbar-item.active {
  font-weight: 700;
  color: #fa4b8b;
}
.home-navbar .home-navbar-item:hover {
  cursor: pointer;
}

</style>